<template>
  <div id="container" v-loading="fullscreenLoading"></div>
</template>


<script language="javascript">
  import { listFactory } from "@/api/basic/factory/factory";
  export default {
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 30,
        },
        fullscreenLoading: true,
      };
    },
    created() { },
    methods: {
      /** 查询工厂基础信息列表 */
      getList() {
        let center = [120.54496, 36.222742];
        listFactory(this.queryParams).then((response) => {
          this.factoryList = response.rows;
          this.fullscreenLoading = false;
          this.$nextTick(() => {
            if (response.rows.length > 0) {
              // center = [];
              // center.push(response.rows[0].lng);
              // center.push(response.rows[0].lat);
            }
            this.initMap(center);
          })
          // console.log(response.rows);
        }).catch((error) => {
          this.initMap(center);
          this.fullscreenLoading = false;
        });

      },
      // 实例化地图
      initMap(center) {
        var _this = this;
        var opts = {
          subdistrict: 0,
          extensions: "all",
          level: "city",
        };
        //利用行政区查询获取边界构建mask路径
        //也可以直接通过经纬度构建mask路径
        var district = new AMap.DistrictSearch(opts);
        district.search("崂山区", function (status, result) {
          var bounds = result.districtList[0].boundaries;
          var mask = [];
          for (var i = 0; i < bounds.length; i += 1) {
            mask.push([bounds[i]]);
          }
          var map = new AMap.Map("container", {
            center: center,
            disableSocket: true,
            viewMode: "3D",
            showLabel: false,
            labelzIndex: 130,
            pitch: 40,
            mapStyle: "amap://styles/blue",
            zoom: 11.6,
            layers: [
              new AMap.TileLayer.RoadNet({
                //rejectMapMask:true
              }),
              new AMap.TileLayer.Satellite(),
            ],
          });
          //var maskerIn = new AMap.Marker({
          //   position:[120.46803,36.10811],
          // map:map
          //})
          var data = _this.factoryList;
          var lnglats = [];

          // for (var i in data) {
          //   var position = [];
          //   if (data[i].lat != null) {
          //     position.push(Number(data[i].lng));
          //     position.push(Number(data[i].lat));
          //     lnglats.push({
          //       title: data[i].name,
          //       address: data[i].address == null ? "- -" : data[i].address,
          //       position: position,
          //       peopleNum: data[i].peopleNum == null ? "- -" : data[i].peopleNum,
          //       scale: data[i].scale == null ? "- -" : data[i].scale,
          //       fundNum: data[i].fundNum == null ? "- -" : data[i].fundNum,
          //       leader: data[i].leader == null ? "- -" : data[i].leader,
          //       phone: data[i].phone == null ? "- -" : data[i].phone,
          //       desc: data[i].desc == null ? "- -" : data[i].desc,
          //       pic:
          //         data[i].pic == null || data[i].pic == "" ? "- -" : data[i].pic,
          //     });
          //   }
          // }
          // var clickEventListener = map.on("click", function (e) {
          //   // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
          //   // console.log(e)
          // });
          // 创建一个 Icon
          // var startIcon = new AMap.Icon({
          //   // 图标尺寸
          //   // size: new AMap.Size(25, 34),
          //   // 图标的取图地址
          //   image: require("@/assets/images/mark.png"),
          //   // 图标所用图片大小
          //   // imageSize: new AMap.Size(135, 40),
          //   // 图标取图偏移量
          //   // imageOffset: new AMap.Pixel(-9, -3)
          // });
          // var infoWindow = new AMap.InfoWindow({
          //   offset: new AMap.Pixel(0, -30),
          // });
          // for (var i = 0, marker; i < lnglats.length; i++) {
          //   var marker = new AMap.Marker({
          //     position: lnglats[i].position,
          //     icon: startIcon,
          //     map: map,
          //     extData: {
          //       markertitle: lnglats[i].title,
          //       markerAddress: lnglats[i].address,
          //     },
          //   });
          //   // console.log(marker.getExtData(), "测试1111111111111");
          //   var title = marker.getExtData().markertitle;
          //   var address = marker.getExtData().markerAddress;
          //   // marker.content = title + "\n" + address;

          //   // (marker.content =
          //   //   "<div class='de'>名称: " +
          //   //   title +
          //   //   "</div>" +
          //   //   "<div class='de'>地址: " +
          //   //   address +
          //   //   "</div>" +
          //   //   "<div class='de'>人数: " +
          //   //   lnglats[i].peopleNum +
          //   //   "" +
          //   //   "； &nbsp;规模: " +
          //   //   lnglats[i].scale +
          //   //   "；&nbsp;资金: " +
          //   //   lnglats[i].fundNum +
          //   //   "</div>" +
          //   //   "<div class='de'>负责人: " +
          //   //   lnglats[i].leader +
          //   //   "； &nbsp;联系方式: " +
          //   //   lnglats[i].phone +
          //   //   "</div>" +
          //   //   "<div class='de'>工厂描述: " +
          //   //   lnglats[i].desc +
          //   //   "</div>" +
          //   //   "<div class='de'> <img style='width:100%;cursor: pointer;' src='" +
          //   //   lnglats[i].pic +
          //   //   "' /></div>"), //设置文本标注内容
          //   (marker.value = {
          //     title: title,
          //     address: address,
          //     peopleNum: lnglats[i].peopleNum,
          //     scale: lnglats[i].scale,
          //     fundNum: lnglats[i].fundNum,
          //     leader: lnglats[i].leader,
          //     phone: lnglats[i].phone,
          //     pic: lnglats[i].pic,
          //   }),
          //     // marker.content = "第" + (i + 1) + "个Marker";
          //     marker.on("click", markerClick);
          //   // marker.setTitle('我是marker的title');
          //   marker.setLabel({
          //     offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          //     content:
          //       "<div class='info'>" +
          //       (i + 1) +
          //       "." +
          //       lnglats[i].title +
          //       "</div>", //设置文本标注内容
          //     direction: "top", //设置文本标注方位
          //   });
          //   // console.log(111)
          // }
          // marker.setTitle('我是marker的title');

          // function markerClick(e, val) {
          //   // console.log(e.target.value);
          //   _this.$emit("openMap", e.target.value);
          //   infoWindow.setContent(e.target.content);
          //   infoWindow.open(map, e.target.getPosition());
          // }
          //var maskerOut = new AMap.Marker({//区域外的不会显示
          //    map:map
          // })
          //添加描边
          // for (var i = 0; i < bounds.length; i += 1) {
          //   new AMap.Polyline({
          //     path: bounds[i],
          //     // strokeColor: "#01b0f3",
          //     strokeColor: "#00baff",
          //     strokeWeight: 4,
          //     strokeOpacity: 1, //线透明度

          //     // fillColor: "red", //填充色
          //     // fillOpacity: 0.35, //填充透明度
          //     map: map,
          //   });
          // }
          console.log(bounds)
          console.log(mask)
var suzhou = [[121.3435,31.51206],[121.32251,31.49936],[121.32016,31.50588],[121.30553,31.50534],[121.2986,31.49151],[121.26887,31.48746],[121.25943,31.47795],[121.25445,31.48375],[121.24707,31.47706],[121.2419,31.49329],[121.23524,31.49312],[121.23036,31.47743],[121.2138,31.47891],[121.18082,31.45146],[121.14734,31.44393],[121.14783,31.43619],[121.16434,31.43106],[121.14625,31.42107],[121.15938,31.40579],[121.14383,31.39233],[121.14844,31.38541],[121.11375,31.37445],[121.12022,31.36867],[121.10695,31.3666],[121.10728,31.35525],[121.11798,31.35141],[121.11797,31.34345],[121.13044,31.34421],[121.12995,31.30259],[121.14378,31.3097],[121.16156,31.28299],[121.14521,31.27529],[121.12065,31.28703],[121.10545,31.27365],[121.08879,31.29208],[121.08215,31.27154],[121.06246,31.26745],[121.05716,31.24643],[121.06435,31.24614],[121.0668,31.19496],[121.0773,31.16602],[121.06912,31.1487],[121.04542,31.15403],[121.04077,31.13759],[121.02672,31.14377],[121.01849,31.1341],[120.98391,31.13171],[120.93034,31.14141],[120.87874,31.13338],[120.8568,31.10283],[120.89235,31.09749],[120.90472,31.0805],[120.89462,31.05866],[120.90136,31.0175],[120.89135,31.00374],[120.8655,30.98968],[120.8474,30.9896],[120.82298,31.0057],[120.80291,31.00541],[120.76993,30.99662],[120.7697,30.9773],[120.74594,30.9625],[120.7256,30.97154],[120.6982,30.97079],[120.68445,30.95518],[120.69756,30.95034],[120.71063,30.92905],[120.71326,30.88505],[120.70128,30.88336],[120.70392,30.87094],[120.69312,30.87066],[120.68282,30.88254],[120.66326,30.86131],[120.65869,30.86527],[120.65488,30.84704],[120.64356,30.85546],[120.60862,30.84825],[120.58896,30.85443],[120.55949,30.83152],[120.50444,30.75797],[120.48909,30.76369],[120.47553,30.80386],[120.45528,30.81685],[120.4604,30.83986],[120.4413,30.85629],[120.45318,30.86972],[120.4345,30.88798],[120.44254,30.90168],[120.435,30.92082],[120.4201,30.92771],[120.42422,30.90058],[120.37941,30.89077],[120.36466,30.88047],[120.35682,30.911],[120.35967,30.93294],[120.37129,30.94867],[120.25066,30.92571],[120.1979,30.92831],[120.13252,30.94308],[120.05245,31.00574],[120.00041,31.02775],[119.98852,31.05922],[119.94364,31.10466],[119.93982,31.14295],[119.9205,31.16234],[119.9197,31.17074],[120.11023,31.264],[120.17372,31.30881],[120.20961,31.34566],[120.41771,31.44768],[120.47418,31.44656],[120.52361,31.46873],[120.54297,31.46993],[120.55524,31.47787],[120.54804,31.49508],[120.5552,31.50758],[120.59124,31.52751],[120.59666,31.51627],[120.60549,31.52402],[120.59457,31.57601],[120.57384,31.58595],[120.56742,31.584],[120.57303,31.57747],[120.55021,31.57502],[120.54309,31.60174],[120.56647,31.60193],[120.57708,31.61416],[120.6006,31.61712],[120.5921,31.62504],[120.59213,31.65028],[120.55862,31.65733],[120.57023,31.66932],[120.56821,31.68546],[120.58645,31.69071],[120.60081,31.70885],[120.58245,31.72117],[120.58436,31.73447],[120.60002,31.74463],[120.58424,31.78215],[120.57071,31.79378],[120.55838,31.78571],[120.55589,31.7942],[120.53156,31.78779],[120.52254,31.80629],[120.53131,31.82785],[120.50328,31.84171],[120.49088,31.87133],[120.46882,31.87962],[120.4665,31.88998],[120.37867,31.91374],[120.39126,31.92861],[120.37353,31.94644],[120.3707,31.99082],[120.40376,32.01622],[120.46567,32.04583],[120.5038,32.04102],[120.62839,32.00117],[120.76158,32.02045],[120.78204,32.01599],[120.80313,31.98844],[120.86033,31.87306],[120.91664,31.79366],[120.9595,31.78304],[121.06064,31.78306],[121.10122,31.76252],[121.14533,31.75392],[121.28911,31.61628],[121.37221,31.55321],[121.3435,31.51206]];
          const polygon = new AMap.Polygon({
            // map: map,// AMap的实例对象
            path: mask, //设置多边形边界路径
            strokeColor: 'red', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 3, //线宽
            fillColor: '#000000', //填充色
            fillOpacity: 0.35, //填充透明度
          });
          map.add(polygon);
        });
      },
      //打开图片
      bigImg(e) {
        console.log(e);
      },
    },
    async mounted() {
      // var _this = this;
      // setTimeout(() => {
      //   this.initMap();
      // }, 200);
      // window["bigImg"] = (result) => {
      //   this.bigImg(result);
      // };
      await this.$nextTick(() => {
        this.getList();
      });
    },
  };
</script>
<style>
  body,
  html,
  #container {
    margin: 0;
    width: 100%;
    height: 110%;
  }

  .info {
    background: rgba(34, 101, 92, 0.55);
    color: #ffffff;
    padding: 5px 7px;
  }

  .amap-marker-label {
    border: 1px solid rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
  }

  .amap-info-content {
    background-color: rgba(9, 59, 118, 0.85);
    /* opacity: 0.75; */
    /* background-color: #42a9ff; */
    border: 1px solid #42a9ff;
    width: 350px;
    color: white;
  }

  .amap-info-close {
    top: 1px;
    right: 2px !important;
  }

  .amap-info-content {
    padding: 10px 12px 10px 12px;
  }

  .de {
    background: rgba(88, 134, 127, 0);
    color: #ffffff;
    font-size: 12px;
    padding: 0;
  }
</style>
